<template>
    <SchoolHeader :menuItemsData="menuItems" :isSticky="false" />
    <div class="main-content">
        <breadCrumb :pTitle="pTitle" :path="path" />
        <div class="rs-inner-blog yellow-color pt-100 pb-100 md-pt-70 md-pb-70" v-show="isShow">
            <div class="container">
                <div class="row">
                    <div class="col-lg-9 rs-event mb-30">
                        <div class="blog-deatails">
                            <div class="blog-full">
                                <h2 class="title mb-40">{{ detailsInfo.title }}</h2>
                                <ul class="single-post-meta">
                                    <li><span class="p-date"><i class="fa fa-calendar-check-o"></i> {{
                                            detailsInfo.createTime }} </span>
                                    </li>
                                    <li><span class="p-date"><i class="fa fa-user-o"></i> {{ detailsInfo.author }}
                                        </span></li>
                                    <!-- <li><span class="p-date"><i class="fa fa-book"></i> 创先争优 </span></li> -->
                                    <!-- <li class="post-comment"><span class="p-date"><i class="fa fa-eye"></i> 100 </span>
                                    </li> -->
                                </ul>
                                <div class="blog-desc" v-if="isVideo">
                                    <div class="rs-video-home9 mb-30" :style="`background-image: url(${detailsInfo.cover});`">
                                        <div class="img-part media-icon yellow-color">
                                            <a class="popup-videos" @click="open(detailsInfo.fileIds)"><i class="fa fa-play"></i></a>
                                        </div>
                                    </div>
                                </div>
                                <div class="blog-desc" v-else>
                                    <descComment ref="descCommentRef" />
                                </div>
                                <div class="attach-list mt-30"></div>
                            </div>
                            <div class="album-list"></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-12 order-last">
                        <widgetArea :pTitle="pTitle" :menuItem="menuItem" />
                    </div>
                </div>
            </div>
        </div>

    </div>
    <Footer />
    <div id="videoModal" class="modal-box" v-show="isShowVideoModal" @click="closeModal">
            <div class="modal-content">
                <!-- <span id="closeModalBtn" class="close"  @click="closeModal">&times;</span> -->
                <video class="video-box" ref="videoPlayer" :src="modalVideoSrc"  autoplay></video>
            </div>
         </div>
</template>
<script setup>
import SchoolHeader from '@/components/SchoolHeaderCopy.vue';
import Footer from '@/components/Footer.vue';
import { ref, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import breadCrumb from './breadCrumb.vue';
import widgetArea from './widgetArea.vue';
import { pMenuItems } from '@/router/primary';
import { useMenuStore } from '@/stores/menuStore';
import { publicListDetail } from '@/api/api.js'
import descComment from './desc.vue';
const props = defineProps({
    pathName: {
        type: String,
        default: ''
    },
    isVideo: {
        type: Boolean,
        default: false
    }
})
const route = useRoute();
const menuStore = useMenuStore();
const pTitle = ref(route.query.pTitle);
const path = ref('/' + props.pathName);
const descCommentRef = ref('');
const modalVideoSrc =  ref('')
const isShowVideoModal = ref(false);
const open = (href) => {
    modalVideoSrc.value = href;
    isShowVideoModal.value = true;
}
// 关闭弹窗函数
function closeModal() {
    isShowVideoModal.value = false;
    modalVideoSrc.value = '';
}
function findParentName(data, targetCategory) {
    for (const item of data) {
        if (item.children) {
            const foundChild = item.children.find(child =>
                child.link.includes(`category=${targetCategory}`)
            );
            if (foundChild) return item.name;

            const nestedResult = findParentName(item.children, targetCategory);
            if (nestedResult) return nestedResult;
        }
    }
    return null;
}
function findParent(data, targetCategory) {
    for (const item of data) {
        if (item.children) {
            const foundChild = item.children.find(child =>
                child.link.includes(`category=${targetCategory}`)
            );
            if (foundChild) return item;

            const nestedResult = findParentName(item.children, targetCategory);
            if (nestedResult) return nestedResult;
        }
    }
    return null;
}
const getInfo = () => {
    const item = findParent(pMenuItems,route.query.category)
    let menuItem = []
    if (item.children) {
        menuItem = item.children.map((item, index) => {
            let path = item.link
            let active = false
            if (item.link.includes(route.query.category)) {
                active = true
            }
            return {
                name: item.name,
                path: path,
                active: active
            }
        })
    }
    return menuItem
}
const menuItem = getInfo();
const menuItems = menuStore.menuItems;

const detailsInfo = ref({
    title:'',
    cover:'',
    content:'',
    fileIds:'',
    author:'',
    createTime: ''
});
const isShow = ref(false)
onMounted(() => {
    if (route.query.articleId) {
        publicListDetail(route.query.articleId,1000).then((res) => {
            detailsInfo.value = res.data
            isShow.value = true
            if (!props.isVideo) {
                if(descCommentRef.value){
                    descCommentRef.value?.init(detailsInfo.value.content)
                }
            }
        })
    }
})
</script>
<style lang="scss" scoped>
/* 模态框背景样式 */
.modal-box {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

/* 弹窗内容样式 */
.modal-content {
    // background-color: #fefefe;
    margin: auto;
    padding: 20px 0px;
    // border: 1px solid #888;
    width: 100%;
    max-width: 900px;
    position: relative;
    width: calc(100% - 20px);
}

/* 关闭按钮样式 */
.close {
    color: #fff;
    right: -6px;
    text-align: right;
    padding-right: 6px;
    width: 100%;
    position: absolute;
}
.video-box{
    position: absolute;
    top: 180px;
    width: 100%;
    max-width: 900px;
}
.close:hover,
.close:focus {
    color: black;
}
</style>